<template>
  <div class="box">
    <div class="add-book" @click="flag = true">
      <div class="add-icon"></div>
      <span>新建书签</span>
    </div>
    <div class="book-list">
      <div
        v-for="(item, index) in bookmarks"
        :key="index"
        :class="['book-item', activeIndex === index ? 'active' : '']"
        @click="loadMark(item, index)"
      >
        <span class="book-text">{{ item.bookmarkName }}</span>
        <el-popconfirm
          width="220"
          icon-color="#626AEF"
          :title="'确定删除' + item.bookmarkName + '吗'"
          @cancel="onCancel"
          @confirm="delBookMark(item.id,index)"
        >
          <template #reference>
            <span class="clear-icon" @click.native.stop></span>
          </template>
          <template #actions="{ confirm, cancel }">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button type="danger" size="small" @click="confirm"> 删除 </el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
    <screenDialog :dialogVisible="flag" size="small" @close="flag = false" v-if="flag">
      <div class="book-box">
        <darkInput v-model="inpValue" placeholder="输入书签名称" title="名称" />
        <br />
        <el-button
          align="right"
          type="primary"
          style="margin-top: 10px; float: right"
          @click="addBookMark"
          >添加书签</el-button
        >
      </div>
    </screenDialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import roomDialog from '../../../components/roomDialog.vue'
import darkInput from '../../../components/darkInput.vue'
import * as bookmark from '../../../api/bookmark'
import { useMapStoreStore } from '../../../stores/index'
import { addMapLayer, delMapLayer } from '../../../api/gis2d/maputils'
import { ElMessage } from 'element-plus'

const store = useMapStoreStore()
const activeIndex = ref(-1)

var bookmarks = ref([])
const flag = ref(false)
const inpValue = ref('')

function initData() {
  var query = {
    viewType: '2d'
  }
  bookmark.getBookMarkList(query).then((res) => {
    bookmarks.value = res
  })
}
function addBookMark() {
  if (inpValue.value === '') {
    ElMessage({
      text: '1',
      type: 'warning'
    })
    return
  }
  var extent = map.getView().calculateExtent(map.getSize())
  var zoom = map.getView().getZoom()

  var subjectCode = store.subjectData.join(',')
  var layerCode = store.tree.join(',')
  var query = {
    viewType: '2d',
    bookmarkName: inpValue.value,
    bookmarkExtend: extent + '--' + zoom,
    // subjectCode: subjectCode,
    layerCode: layerCode
  }
  bookmark.addBookMark(query).then((res) => {
    flag.value = false
    inpValue.value = ''
    initData()
  })
}
let oldLaycode = ''
const loadMark = (e, index) => {
  if (activeIndex.value === index) {
    activeIndex.value = -1
    for (const element of oldLaycode) {
      store.delLayer(element)
    }
    return
  }
  activeIndex.value = index
  var tmpExtentd = e.bookmarkExtend
  var extend = tmpExtentd.split('--')[0].split(',')
  var zoom = tmpExtentd.split('--')[1]
  var z = Math.floor(Number(zoom))

  extend = extend.map((str) => parseFloat(str))
  map.getView().fit(extend, { size: extend, duration: 1000, minZoom: z - 1, maxZoom: z + 1 })
  var layerCode =e.layerCode.split(',');

  if (oldLaycode) {
    for (const element of oldLaycode) {
      store.delLayer(element)
    }
  }
  store.addLayer(layerCode)
  oldLaycode = layerCode 
}

const delBookMark = (id,index) => {
  bookmark.delBookMarkById({ id }).then((e) => {
    if(activeIndex.value === index){
       for (const element of oldLaycode) {
      store.delLayer(element)
      }
    }
    initData();
  })
}

initData()
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  padding: 46px 20px 20px;
  box-sizing: border-box;
  font-size: 18px;
  color: #b9eeff;

  .add-book {
    height: 40px;
    border-radius: 60px;
    background: rgba(10, 26, 52, 0.6);
    border: 1px solid rgba(89, 175, 249, 0.7049);
    box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #01c2ff;
    .add-icon {
      width: 20px;
      height: 20px;
      background-image: url(/static/icon/add.png);
      margin-right: 10px;
    }
  }
  .book-list {
    height: calc(100% - 60px);
    margin-top: 20px;
    overflow: auto;

    // 滚动条整体部分
    &::-webkit-scrollbar {
      width: 6px;
      height: 8px;
    }
    &::-webkit-scrollbar-button {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      background: #01c2ff;
      cursor: pointer;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-corner {
      display: none;
    }
    &::-webkit-resizer {
      display: none;
    }

    .book-item {
      height: 40px;
      border-radius: 60px;
      background: #0a1a34;
      border: 1px solid #59aff9;
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      position: relative;
      font-size: 16px;
      padding: 0 10px;
      box-sizing: border-box;
      .book-text {
        width: 120px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }

      .clear-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url(/static/icon/删除@1x.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
      }
      .clear-icon:hover {
        transform: rotate(360deg);
        transition: all 1s ease;
      }
    }
    .active {
      background: #1158ca;
    }
  }
}
.book-box {
  width: 100%;
  height: 100%;
  padding-top: 30px;
  box-sizing: border-box;
}
</style>